<html>
    <head>
        <title>Hello Tree.js </title>
        <meta http-equiv="Access-Control-Allow-Origin" content="*" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../js/jquery-1.9.1.min.js"></script>
        <script src="../js/three.min.js"></script>
        <script type="text/javascript">
            var renderer = null,
            scene = null,
            camera = null,
            cube = null;

            var duration = 5000;//ms
            var currentTime = Date.now();
            function animate(){
                var now = Date.now();
                var deltat = now - currentTime;
                currentTime = now;
                var fract = deltat/duration;
                var angle = Math.PI*2*fract;
                cube.rotation.y+=angle;
            }
            function run(){
                
                requestAnimationFrame(function(){run()});
                renderer.render(scene,camera);
                animate();
            }
            $(document).ready(function(){
                var canvas = document.getElementById("rederCanvas");
                renderer = new THREE.WebGLRenderer({
                    canvas:canvas,antialias:true
                });
                renderer.setSize(canvas.width,canvas.height);
                scene = new THREE.Scene();
                //创建一个新的Three.js场景
                camera = new THREE.PerspectiveCamera(45,canvas.width/canvas.height,1,4000);
                scene.add(camera);

                 // Add a directional light to show off the object
				var light = new THREE.DirectionalLight( 0xffffff, 1.5);

                // Position the light out from the scene, pointing at the origin
                light.position.set(0, 0, 1);
                scene.add( light );
                //创建一个纹理映射的立方体并将其添加到场景中
                //创建一个纹理映射
                var mapUrl = "../images/webgl-logo-256.jpg";
                var map = THREE.ImageUtils.loadTexture(mapUrl);
                //其次创建一个基础材质，传入纹理映射
                var material =new  THREE.MeshPhongMaterial({map:map,color:0xffffff});
                //接着创建立方体几何形状
                var geometry = new THREE.CubeGeometry(2,2,2);
                //将几何形状和材质整合到一个网络中
                cube = new THREE.Mesh(geometry,material);

                //将网格移动到与相机有一段距离的位置,并朝向观察者倾斜

                cube.position.z = -8;
                cube.rotation.x = Math.PI/5;
                cube.rotation.y = Math.PI/5;


                //最后将网格添加到场景中


                scene.add(cube);


                run();

            });
        
        </script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <canvas id="rederCanvas" style="border: none;background-color:#000000" width="500" height="500"></canvas>
    </body>
</html>